import React from 'react';
import styles from '../styles/BatchDragToolbar.module.css';

interface BatchDragStats {
  totalSelected: number;
  validOperations: number;
  conflicts: number;
  canComplete: boolean;
}

interface BatchDragToolbarProps {
  isActive: boolean;
  stats: BatchDragStats;
  onStart: () => void;
  onComplete: () => void;
  onCancel: () => void;
  disabled?: boolean;
}

const BatchDragToolbar: React.FC<BatchDragToolbarProps> = ({
  isActive,
  stats,
  onStart,
  onComplete,
  onCancel,
  disabled = false,
}) => {
  if (!isActive && stats.totalSelected === 0) {
    return null;
  }

  if (!isActive) {
    return (
      <div className={styles.toolbar}>
        <div className={styles.info}>
          <span className={styles.selectedCount}>
            已选择 {stats.totalSelected} 个单元格
          </span>
        </div>
        <button
          className={styles.startButton}
          onClick={onStart}
          disabled={disabled || stats.totalSelected === 0}
          title='开始批量拖拽操作'
        >
          🎯 批量拖拽
        </button>
      </div>
    );
  }

  return (
    <div className={`${styles.toolbar} ${styles.active}`}>
      <div className={styles.dragInfo}>
        <div className={styles.dragStats}>
          <span className={styles.statItem}>
            📦 源项目: {stats.totalSelected}
          </span>
          <span className={styles.statItem}>
            ✅ 有效操作: {stats.validOperations}
          </span>
          {stats.conflicts > 0 && (
            <span className={`${styles.statItem} ${styles.conflicts}`}>
              ⚠️ 冲突: {stats.conflicts}
            </span>
          )}
        </div>
        <div className={styles.dragInstructions}>
          拖拽鼠标选择目标区域，然后点击完成
        </div>
      </div>

      <div className={styles.actions}>
        <button
          className={styles.completeButton}
          onClick={onComplete}
          disabled={!stats.canComplete}
          title={
            stats.canComplete
              ? `完成 ${stats.validOperations} 个拖拽操作`
              : '没有有效的拖拽操作或存在冲突'
          }
        >
          ✅ 完成 ({stats.validOperations})
        </button>
        <button
          className={styles.cancelButton}
          onClick={onCancel}
          title='取消批量拖拽'
        >
          ❌ 取消
        </button>
      </div>
    </div>
  );
};

export default BatchDragToolbar;
